<!-- 服务管理 -->
<template>
	<loading-page v-if="showSkeleton" />
	<!-- tabs -->
	<view class="tab">
		<v-tabs v-model="data.tabIndex" :tabs="data.tabList" color="#999" fontSize="32rpx" height="100rpx" :lineScale="0.4" lineHeight="4rpx" lineColor="#E1835B" paddingItem="0 30rpx" activeColor="#000" :bold="true" :lineAnimation="data.lineAnimation" @change="changeTab"></v-tabs>
	</view>
	<!-- list -->
	<view class="list">
		<template v-for="(item,index) in dataList" :key="index">
			<view class="item" @click="openDeatil(item)">
				<view class="hd">
					<text class="state">{{checkState(item.trial)}}</text>
					<text class="time">{{item.publishtime}} 创建</text>
				</view>
				<view class="bd">
					<text class="title">{{item.servicetitle}}</text>
				</view>
				<view class="ft">
					<view class="price">
						<text class="unit">¥{{item.serviceprice}}</text>
					</view>
					<view class="btns">
						<template v-if="item.trial==1">
							<button type="default" class="btn btn-up" hover-class="btnClickStyle" v-if="item.isshow==2" @click.stop="changeStatus(item)">上架</button>
							<button type="default" class="btn btn-down" hover-class="btnClickStyle" v-if="item.isshow==1" @click.stop="changeStatus(item)">下架</button>
						</template>
						<button type="default" class="btn btn-preview" hover-class="btnClickStyle">预览</button>
					</view>
				</view>
			</view>
		</template>
	</view>
	<!-- 无数据 -->
	<empty v-if="!dataList.length&&!showSkeleton" />
	<!-- 更多数据 -->
	<uni-load-more :status="loadMore.status" v-if="loadMore.show" :contentText="loadMore.txt"></uni-load-more>
	<!-- 服务 -->
	<popup-service ref="popupServiceRef"></popup-service>
</template>
<script setup>
	import { ref, reactive, watch, defineComponent, computed } from 'vue';
	import { onLoad, onReady, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import useGetList from '@/common/hooks/useGetList.js';
	import popupService from '@/pages/find/components/popup-service.vue';
	import { changeServiceState, getServiceDetail } from '@/subpages/common/api/merchant/manage.js';
	defineComponent({
		popupService
	})
	onLoad(() => {
		init();
	});
	onReady(() => {
		data.lineAnimation = true;
	});
	onReachBottom(() => {
		reachBottom();
	});
	onPullDownRefresh(() => {
		pullDownRefresh();
	});
	const { getDataList, dataList, page, loadMore, showSkeleton, reachBottom, pullDownRefresh } = useGetList();
	const popupServiceRef = ref(null);
	const data = reactive({
		tabIndex: 0,
		tabList: ['全部', '审核中', '审核成功', '审核失败'],
		lineAnimation: false,
		searchParams: {
			trial: 'all'
		}
	});
	// 初始化数据
	function init(showLoading = false) {
		getDataList({
			url: '/crm/Service/index',
			params: {
				...data.searchParams
			},
			showLoading: showLoading,
			key: 'lists'
		});
	}
	// 打开服务详情
	async function openDeatil(item) {
		const res = await getServiceDetail({ serviceid: item.id });
		popupServiceRef.value.open(res.data);
	}
	// tab切换
	function changeTab(index) {
		data.searchParams.trial = index == 0 ? 'all' : index;
		init(true);
	}
	// 审核状态
	function checkState(v) {
		switch (+v) {
			case 0:
				return '审核中';
			case 1:
				return '审核通过';
			case 2:
				return '审核失败';
		}
	}
	// 上下架
	async function changeStatus(item) {
		const eMsg = item.isshow == 1 ? '下架成功' : '上架成功';
		await changeServiceState({
			serviceid: item.id
		}, eMsg)
		item.isshow = item.isshow == 1 ? 2 : 1;
	}
</script>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.tab {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99999;
	}
	.list {
		padding: 0 28rpx;
	}
	.item {
		width: 694rpx;
		margin: 28rpx 0 0;
		padding: 0 28rpx 30rpx;
		border-radius: 18rpx;
		background-color: #fff;
		.hd {
			@include flex;
			padding: 24rpx 0;
			border-bottom: 1px solid #ddd;
			.state {
				font-size: 30rpx;
				color: #444;
			}
			.time {
				font-size: 24rpx;
				color: #999;
			}
		}
		.bd {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin: 20rpx 0;
			line-height: 54rpx;
			word-break: break-all;
			font-size: 34rpx;
			color: #000;
		}
		.ft {
			@include flex;
			.price {
				font-size: 34rpx;
				color: #ff0000;
			}
			.btns {
				@include flex;
				margin: 0 -10rpx;
				.btn {
					width: 140rpx;
					height: 60rpx;
					line-height: 60rpx;
					margin: 0 10rpx;
					border: 1px solid $color;
					border-radius: 30rpx;
					background: #fff;
					font-size: 28rpx;
					color: $color;
					&-up {}
					&-down {
						border-color: #aaa;
						color: #aaa;
					}
				}
			}
		}
	}
</style>
